<!-- 轮播图/视频 -->
<template>
  <div>
    <el-upload ref="upload" :class="{ showUpLoad: disabled || fileList.length == limit }" action="#" :limit="limit" list-type="picture-card" :file-list="fileList" :on-change="onChange" :on-success="onSuccess" :on-remove="onRemove" :on-preview="handlePictureCardPreview" :accept="accept" :on-exceed="onExceed" :auto-upload="false" :disabled="disabled">
      <template v-if="!disabled">
        <i class="el-icon-plus"></i>
      </template>
      <div v-if="accept === '.mp4' && !disabled" slot="tip" class="el-upload__tip">一次只能上传一个mp4类型视频文件</div>
      <div v-if="accept === 'jpg/mp4' && !disabled" slot="tip" class="el-upload__tip">只能上传一个mp4类型视频文件，可上传多张jpg,jpeg,png类型图片文件</div>
      <div v-if="accept === '.jpg, .jpeg, .png' && !disabled" slot="tip" class="el-upload__tip">可上传多张jpg,jpeg,png类型图片文件</div>
      <template slot="file" slot-scope="{ file }">
        <div class="mask">
          <!-- 遮罩层 -->
          <div class="above">
            <div class="view el-icon-zoom-in" @click="view(file)"></div>
            <i v-if="!disabled" class="delete el-icon-delete" @click="onRemove(file)"></i>
          </div>
          <video v-if="(file.url && file.url.includes('common/file/upDown/videoView')) || accept === '.mp4' || file.fileType == 'video/mp4' || file.type == 'mp4'" :src="file.url" controls muted width="100%" height="100px"></video>
          <img v-else width="100%" height="100%" :src="file.url || 'data:application/*;base64,' + file.pictureData" alt />
        </div>
      </template>
    </el-upload>
    <!-- 预览图片 -->
    <el-dialog title="预览" :visible.sync="dialogVisible" append-to-body top="0">
      <img :src="dialogImageUrl" alt width="100%" />
    </el-dialog>
    <!-- 预览视频 -->
    <el-dialog title="预览" :visible.sync="dialogViewVideo" append-to-body top="0">
      <video :src="dialogVideo" controls width="100%"></video>
    </el-dialog>
  </div>
</template>
<script>
import DocumentApi from '@/api/document';
import baseUrl from '@/api/baseURL';
export default {
  name: 'UploadImg',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: () => []
    },
    accept: {
      type: String,
      default: 'jpg/mp4'
    },
    limit: {
      type: Number,
      default: 9
    },
    fileList: {
      type: Array,
      default: () => []
    },
    moduleType: {
      type: String,
      default: ''
    },
    upDownType: {
      type: String,
      default: 'FTP'
    }
  },
  data() {
    return {
      dialogVisible: false, // 图片弹窗
      dialogImageUrl: '', // 预览图片
      dialogViewVideo: false, // 视频弹窗
      dialogVideo: '', // 预览视频
      loading: false, // 加载效果
      values: true
      // fileList: []
    };
  },
  destroyed() {
    // this.clearFiles()
  },
  methods: {
    onChange(file, fileList) {
      const a = [];
      fileList.forEach(res => {
        if (res.fileType) {
          a.push(res); // 获取带有res.fileType的结构（和fileList相比少了最后一个添加的数据），表示新加之前的数据；
        }
      });
      const index = a.findIndex(v => {
        return v.fileType === 'video/mp4';
      });
      this.loading = true;
      const dataForm = new FormData();
      dataForm.append('file', file.raw);
      dataForm.append('moduleType', this.moduleType);
      dataForm.append('upDownType', this.upDownType);
      const isLt10M = file.size / 1024 / 1024 < 200;
      if (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/jpg' || file.raw.type === 'video/mp4') {
        if (index !== -1 && file.raw.type === 'video/mp4') {
          fileList.splice(-1, 1);
          this.$message.error('一次只能上传一个视频文件！！！');
          return false;
        }
        if (!isLt10M) {
          this.$message.error('上传大小不能超过 200MB!');
          fileList.splice(-1, 1);
          return false;
        } else {
          DocumentApi.upload(dataForm)
            .then(res => {
              fileList[fileList.length - 1].url = `${baseUrl.fileUrl}moduleType=${this.moduleType}&fileId=${res.data.fileId}`;
              fileList[fileList.length - 1].fileType = file.raw.type;
              fileList[fileList.length - 1].fileId = res.data.fileId;
              this.$emit('input', {
                list: JSON.parse(JSON.stringify(fileList)),
                obj: {
                  fileType: file.raw.type,
                  fileName: res.data.fileName,
                  fileId: res.data.fileId,
                  res: res.data
                }
              });
              // 传递给父组件 fileIdList 图片回显
              // this.$emit('addFileId', res.data) // 传递给父组件  图片数据
              this.$emit('reset');
              this.loading = false;
            })
            .catch(() => {
              fileList.splice(-1, 1);
              this.$message.error('上传失败！');
            });
        }
      } else {
        this.$message.error('请上传jpg,jpeg,png,mp4类型的文件');
        fileList.splice(-1, 1);
        return;
      }
    },
    onRemove(file) {
      // this.fileList.splice(
      //   this.fileList.findIndex(i => i.url === file.url),
      //   1
      // );
      // console.log("this.fileList", this.fileList);
      // this.$emit("input", this.fileList);
      this.$emit('delectFileId', file);
    },
    // 文件超出个数限制时
    onExceed(file) {
      this.$message.info(`最多上传${this.limit}张`);
    },
    // loading设置
    onSuccess(response, file, fileList) {},
    // 预览
    view(file) {
      if ((file.url && file.url.includes('common/file/upDown/videoView')) || this.accept === '.mp4' || file.fileType === 'video/mp4' || file.type === 'mp4') {
        this.dialogViewVideo = true; // 视频弹窗
        this.dialogVideo = file.url; // 预览视频
      } else {
        this.dialogVisible = true; // 图片弹窗
        this.dialogImageUrl = file.url || 'data:application/*;base64,' + file.pictureData; // 预览图片
      }
    },
    handlePictureCardPreview(file) {},
    // 清空
    clearFiles() {
      this.$refs.upload.clearFiles();
    }
  }
};
</script>

<style scoped lang="scss">
/* 隐藏el-upload */
.showUpLoad {
  ::v-deep .el-upload {
    display: none !important;
  }
}
/* loading */
::v-deep .el-loading-mask {
  width: 100%;
}
/*  */
.mask {
  background: #fff;
  width: 100%;
  height: 100%;
  position: relative;
  /*  */
  &:hover .above {
    background: rgba(0, 0, 0, 0.5);
  }
  .above {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    .view {
      display: none;
    }
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover .view {
      display: inline;
      color: #fff;
      font-size: 20px;
      text-align: center;
      cursor: pointer;

      // position: absolute;
      // left: 20%;
      // bottom: 42%;
    }
    .delete {
      display: none;
    }
    &:hover .delete {
      display: inline;
      color: #fff;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      margin-left: 10px;
      // position: absolute;
      // right: 20%;
      // bottom: 42%;
    }
  }

  video {
    width: 300px;
    height: 180px;
    position: absolute;
    top: -30px;
    z-index: 2;
  }
}
::v-deep {
  .el-upload-list__item {
    width: 90px;
    height: 90px;
  }
  .el-upload--picture-card {
    width: 90px;
    height: 90px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
